<template>
	<view class="fabu-body">
		<view class="fabu-content-view">
			<!-- <view class="content__data tn-flex-1">
			  <tn-input type="textarea" placeholder="请输入文本" v-model="content"></tn-input>
			</view> -->
			<view class="img-up-view">
				<view class="title">上传照片</view>
			  <!-- <tn-image-upload ref="imageUpload" :showUploadList="false" @on-list-change="listChange" :autoUpload="false"> -->
				  <!-- #ifdef MP-WEIXIN -->
				  <!-- <view>
					<view v-for="(item,index) in fileList" :key="index" class="tn-image-upload__item">
					  <image class="tn-image-upload__item__image" :src="item.url || item.path" mode="aspectFill" @click="showImage(item)"></image>
						<text class="tn-icon-close" @click="deletePhoto(item, index)"></text>
					</view>
				  </view> -->
				  <!-- #endif -->
				  <!-- #ifdef H5 -->
				  <!-- <template v-slot:file="data">
					<view v-for="(item,index) in data.file" :key="index" class="tn-image-upload__item">
					  <image class="tn-image-upload__item__image" :src="item.url || item.path" mode="aspectFill" @click="showImage(item)"></image>
						<text class="tn-icon-close" @click="deletePhoto(item, index)"></text>
					</view>
				  </template> -->
				  <!-- #endif -->
			  <!-- </tn-image-upload> -->
			  <view class="imgs-content-view">
				  <view v-for="(item,index) in filePathList" :key="index" class="tn-image-upload__item">
				    <image class="tn-image-upload__item__image" :src="item" mode="aspectFill" @click="showImage(item)"></image>
				  	<text class="tn-icon-close" @click="deletePhoto(item, index)"></text>
				  </view>
			  	<view class="upload-view-cls" @touchend="getLocalImg">
			  		<text class="tn-icon-add"></text>
			  	</view>
			  </view>
			</view>
			<view class="tn-margin-bottom-sm">
				<view class="title"> 选择标签</view>
				<view class="">
					<tn-checkbox v-for="(item, index) in checkTags" :key="index" v-model="item.isChecked" >{{item.label}}</tn-checkbox>
				</view>
			</view>
			<view class="line-view"></view>
			<view class="tn-margin-bottom-sm" >
				<view class="title"> 发布对象</view>
				<view class="">
					<tn-radio-group v-model="duixiangvalue" @change="changeduixiang">
						<tn-radio shape="circle" name="quanyuan">全园</tn-radio>
					    <tn-radio shape="circle" name="banji">班级</tn-radio>
					</tn-radio-group>
				</view>
			</view>
			<view class="line-view" v-if="duixiangvalue=='banji'"></view>
			<view class="tn-flex tn-flex-row-between tn-padding-right tn-margin-bottom-sm" v-if="duixiangvalue=='banji'">
				<view class="title"> 发布班级</view>
				<view class="" @click="showbanjilist = true">
					<text v-if="banjiInfo.value">{{banjiInfo.label}}</text>
					<text v-else>请选择班级</text>
				</view>
			</view>
			<view class="line-view" v-if="duixiangvalue=='banji'"></view>
			<view class="xianshibanji" v-if="duixiangvalue=='banji' && banjiInfo.value">
				<view class="title"> 选择幼儿</view>
				<view class="title">
					<tn-checkbox @change="checkboxChange" v-model="isAllClass">全选</tn-checkbox>
				</view>
				<view class="">
					<tn-checkbox v-for="(item, index) in childList" :key="index" v-model="item.isselect" >{{item.name}}</tn-checkbox>
				</view>
			</view>
			
			<view class="login__body__item__button " hover-class="tn-hover" :hover-stay-time="150" @click="uploadImgs">发布</view>
		</view>
		
		<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center" @click="previewImg=''">
			<image class="tn-width-full" :src="previewImg" mode="widthFix"></image>
			<text class="tn-icon-close" @click="previewImg=''"></text>
		</view>
		<tn-toast
		  ref="toast"
		></tn-toast>
		<tn-select v-model="showbanjilist" mode="multi-auto" :list="classList" valueName="classId" labelName="className" @confirm="confirm"></tn-select>
	</view>
</template>

<script>
	export default{
		name: 'fabudongtai',
		data(){
			return {
				fileList: [],
				classList:[],
				content: '',
				previewImg: '',
				filePathList: [],
				isAllClass: false,
				duixiangvalue: 'quanyuan',
				showbanjilist: false,
				banjiInfo:{},
				checkTags: [
				          {
				            label: "活泼可爱",
				            isChecked: false,
				          },{
				            label: "宝贝棒棒哒",
				            isChecked: false,
				          },{
				            label: "创意手工",
				            isChecked: false,
				          },{
				            label: "趣味游戏",
				            isChecked: false,
				          },{
				            label: "课堂活动",
				            isChecked: false,
				          },{
				            label: "今日美味",
				            isChecked: false,
				          },{
				            label: "酷萌宝贝",
				            isChecked: false,
				          },{
				            label: "宝贝作品",
				            isChecked: false,
				          },{
				            label: "我们毕业啦",
				            isChecked: false,
				          },{
				            label: "安全教育",
				            isChecked: false,
				          },{
				            label: "儿童健康",
				            isChecked: false,
				          },{
				            label: "家长学堂",
				            isChecked: false,
				          },{
				            label: "习惯养成",
				            isChecked: false,
				          },{
				            label: "性格培养",
				            isChecked: false,
				          },{
				            label: "管教方式",
				            isChecked: false,
				          },{
				            label: "启蒙教育",
				            isChecked: false,
				          },{
				            label: "今日故事",
				            isChecked: false,
				          },{
				            label: "今日推荐",
				            isChecked: false,
				          },{
				            label: "节日热点",
				            isChecked: false,
				          },{
				            label: "分离焦虑",
				            isChecked: false,
				          },{
				            label: "开学准备",
				            isChecked: false,
				          },{
				            label: "妙语趣事",
				            isChecked: false,
				          },],
				childList: [],
				imageTitle: '',
				userInfo: {}
			}
		},
		onShow() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			  this.action = this.config.apiUri + '/sysFileInfo/UploadFileInfo';
		},
		mounted() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.getClasss();
			this.action = this.config.apiUri + '/sysFileInfo/UploadFileInfo';
			this.userInfo = uni.getStorageSync('userInfo');
			if(this.userInfo.includeEmployeeAttendance){
				
				
			}
		},
		methods:{
			checkboxChange(val){
				console.log('------------------',val)
				if(val.value){
					this.childList.forEach(item => {
						item.isselect = true;
					})
				}else{
					this.childList.forEach(item => {
						item.isselect = false;
					})	
				}
			},
			
			getallbanjiFenlei(){
				this.request({
					url: '/SysClasses/List',
					method: 'get',
					params: {
						isArchived: false
					},
				}).then(res => {
					if(res.code == 200){
						if(res.data && res.data.length){
							this.classList = res.data.map(item => {
							  	item.isChecked = false;
							  	return {
									className: item.name,
									classId: item.id,
									isChecked: false
								};
							})
						}	
					}
				})
			},
			getClasss(){
				  this.request({
					url: '/ClassDynamic/GetMyAuthClassList',
					method: 'get',
				  }).then(res => {
					  if(res.code == 200){
						  if(res.data && res.data.length){
							  this.classList = res.data.map(item => {
							  	item.isChecked = false;
							  	return item;
							  })
						  }else{
							  this.getallbanjiFenlei()
						  }
					  }
				  })
			},
			getChilds(){
				if(!this.banjiInfo.value){return}
				  this.request({
					url: '/SysClasses/Roster',
					method: 'get',
					params: {
						pageNo: 1,
						pageSize: 100,
						ClassId: this.banjiInfo.value,
					},
				  }).then(res => {
					  if(res.code == 200){
						  this.childList = res.data.rows.map(item => {
							  item.isselect = false;
							  return item;
						  })
					  }
				  })
			},
			beforeUpload(){
				
			},
			deletePhoto(item, index){
				this.fileList.splice(index, 1);
				this.filePathList.splice(index, 1)
			},
			showImage(item){
				this.previewImg = item;
			},
			changeduixiang(val){
				if(val == 'quanyuan'){
					this.banjiInfo = {}
				}
			},
			confirm(e){
				this.banjiInfo = e[0]
				console.log(this.banjiInfo)
				this.isAllClass = false;
				this.getChilds()
			},
			async fabuFunction(imgIdArr){
				// if(!this.content ){
				// 	this.$refs.toast.show({
				// 	  title: '',
				// 	  content: '请输入发布内容',
				// 	  icon: 'fail',
				// 	  image: '',
				// 	  duration: 1500
				// 	})
				// 	return;
				// }
				
				// let cresult = await this.contentCheck.checkRequest(2, this.content)
				// if(!cresult){
				// 	return
				// }
				if(!imgIdArr.length){
					this.$refs.toast.show({
					  title: '',
					  content: '请上传图片',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return;
				}
				
					let childIdList = [];
				if(this.duixiangvalue == 'banji'){
					if(!this.banjiInfo.value){
						
							this.$refs.toast.show({
							  title: '',
							  content: '请选择发布班级',
							  icon: 'fail',
							  image: '',
							  duration: 1500
							})
							return;
					}else{
						this.childList.forEach(item => {
							if(item.isselect){
								childIdList.push(item.id)
							}
						})
						if(!childIdList.length){
							this.$refs.toast.show({
							  title: '',
							  content: '请选择幼儿',
							  icon: 'fail',
							  image: '',
							  duration: 1500
							})
							return
						}
					}
				}
				let tags = []
				this.checkTags.forEach(item => {
					if(item.isChecked){
						tags.push(item.label)
					}
				})
				
				let postData = {
					describe: this.content,
					classId: this.banjiInfo.value,
					childIdList: childIdList,
					imageIdList: imgIdArr,
					tags: tags.join(',')
				}
				  this.request({
					url: '/ClassAlbum/MoveAdd',
					method: 'post',
					params: postData
				  }).then(res => {
					  if(res.code == 200){
						  uni.navigateBack();
							this.$refs.toast.show({
								title: '',
								content: '发布成功',
								icon: 'success',
								image: '',
								duration: 1500
							})	  
					  }else{
						  this.$refs.toast.show({
						    title: '',
						    content: res.message,
						    icon: 'fail',
						    image: '',
						    duration: 1500
						  })
					  }
				  })
			},
			uploadImgs(){
				 let that = this;
				 let imgIdArr = [];
				 if(!this.fileList.length){
					 this.fabuFunction([])
					 return;
				 }
				this.fileList.forEach(item => {
					this.uploadPhoto(item, item.path, async (resData) => {
						if(resData.code == 200){
							let _url = this.imageTitle + resData.data
							let cresult = await this.contentCheck.mediaCheck(2, _url, 2)
							if(!cresult){
								return
							}
							imgIdArr.push(resData.data)
							if(imgIdArr.length == this.fileList.length){
								that.fabuFunction(imgIdArr)
							}
						}
					})
				})
			},
			uploadPhoto(file, filePath,callBack){
				uni.uploadFile({
				    url: this.config.apiUri + '/sysFileInfo/UploadFileInfo',
					// files: arr,
					name: 'file',
					file: file,
					filePath: filePath,
				    header: {
						'Authorization': 'Bearer '+ uni.getStorageSync('token')
				    },
				    success: (res) => {
						let resData = JSON.parse(res.data)
						if(resData.code == 200){
							if(callBack){
								callBack(resData);
							}
						}else{
							  this.$refs.toast.show({
							    title: '',
							    content: resData.message || '错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
						}
				    },
					fail:(err) => {
						console.log(err)
					}
				});
			},
			fileRemove(index, lists, name){
				
			},
			listChange(lists, index) {
				console.log('上传文件列表发生改变', lists, index);
				this.fileList = lists;
				console.log(lists)
			},
			getLocalImg(){
				// if(this.fileList.length >= 9){
				// 	return;
				// }
				wx.chooseImage({
				   success: chooseResult => {
						console.log(chooseResult)
						chooseResult.tempFiles.forEach((item, index) => {
							// if(this.fileList.length < 9){
								this.fileList.push(item)
								this.filePathList.push(chooseResult.tempFilePaths[index])
							// }
						})
						console.log(this.fileList, this.filePathList)
					}
				})
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.fabu-body{
		// <!-- #ifdef MP-WEIXIN -->
		
		min-height: 100vh;
		background-color: rgba(245, 245, 245, 1);
		// <!-- #endif -->
		position: relative;
	}
	.fabu-content-view{
		padding: 0 3%;
		padding-bottom: 2%;
	}
	.content__data{
		background-color: #ffffff;
		height: 350rpx;
		overflow-y: auto;
		margin-bottom: 30rpx
	}
	.img-up-view{
		margin-bottom: 30rpx;
	}
  .tn-image-upload__item {
    width: 100%;
    height: 180rpx;
    border-radius: 30rpx;
    margin-bottom: 20rpx;
		  float: left;
    &__image {
      width: 100%;
      height: 180rpx;
      border-radius: 30rpx;
    }
  }
  .tn-image-upload__custom-btn {
    background-color: $tn-font-holder-color;
    width: 100%;
    height: 180rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30rpx;
  }
  .login__body__item__button {
		     width: 90%;
		     height: 77rpx;
		     text-align: center;
		     font-size: 31rpx;
		     font-weight: bold;
		     line-height: 77rpx;
		     letter-spacing: 1em;
		     text-indent: 1em;
		     border-radius: 39rpx;
			 background-color: #79CF67;
			 color:#fff;
			 margin-bottom: 20rpx;
			 position: absolute;
			 bottom: env(safe-area-inset-bottom);
			 left:5%;
	}
	.xianshibanji{
		margin-bottom: 50rpx;
	}
	.tn-image-upload__item {
	    width: 190rpx;
	    height: 190rpx;
	    border-radius: 30rpx;
	    margin-bottom: 20rpx;
		margin-right: 20rpx;
		position: relative;
	    &__image {
	      width: 100%;
	      height: 100%;
	      border-radius: 30rpx;
	    }
		  .tn-icon-close{
			  position: absolute;
			  top: 10rpx;
			  right: 10rpx;
			  font-size: 30rpx;
			  color: red;
		  }
	  }
	  .image-check-view{
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 2;
		  background-color: rgba(1, 1, 1, 1);
		  .tn-icon-close{
			  position: absolute;
			  top: 10px;
			  right: 10px;
			  font-size: 36rpx;
			  z-index: 888;
		  }
	  }
	  .imgs-content-view{
		  overflow: hidden;
	  }
	  .upload-view-cls{
		  width: 190rpx;
		  height: 190rpx;
		  border: 1px solid #dddddd;
		  float: left;
		  line-height: 190rpx;
		  text-align: center;
		  .tn-icon-add{
			  font-size: 80rpx;
		  }
	  }
	  .title{
		  font-weight: 550;
	  }
	.line-view{
		border-bottom: 1px solid #dddddd;
		margin-bottom: 16rpx;
	}
</style>